/**
 * @author wn
 * @date 2022/08/08 11:52:16
 * @description: 弹出 确认框 组件--渲染逻辑
 *
 * 该函数返回 Promise 确定 调用resolve 取消 调用reject
 *                       then            catch
 *
 * 1 导入被创建的组件
 * 2 准备dom 容器 装载 该组件-->容器由 render 渲染生成
 * 3 将该组件生成 虚拟节点  h(component, obj)  createVNode  jsX
 * render()-->渲染到页面后,vNode.el 属性可以看到真的的 DOM
 * 4 使用render 渲染该虚拟节点  到容器中
 * 5 返回 Promise
 *
 * 该 js 如何 向 该组件 传递 自身 函数方法
 * 1 定义 callback函数,函数中执行 js内方法  通过 props 传递给 组件
 * 2 组件接收 该callback 函数
 * 3 事件中 调用该 callback
 * 4 即可 触发 js中 的方法
 */

import XtxConfirm from './XtxConfirm'
import { render } from 'vue'

// 准备容器
const vDiv = <div class="xtx-confirm-container"></div>
render(vDiv, document.body)

// Confirm
export default ({ title, message }) => {
	return new Promise((resolve, reject) => {
		// 定义callback 函数 组件触发
		const confirmCallback = () => {
			// 取消该确认框的显示
			render(null, vDiv.el)
			resolve('删除成功')
		}
		const cancelCallback = () => {
			// 取消该确认框的显示
			render(null, vDiv.el)
			reject(new Error('点击取消'))
		}
		// 将该组件生成 虚拟节点
		const vNode = (
			<XtxConfirm
				title={title}
				message={message}
				cancelCallback={cancelCallback}
				confirmCallback={confirmCallback}></XtxConfirm>
		)
		// 将虚拟节点渲染到容器中
		render(vNode, vDiv.el)
	})
}
